@charset 'UTF-8';
@import './common.scss';
@import '../fonts/iconfont.css';

.web{
	main{
		.about{
			padding-top: 5vw;
			width: 54vw;
			margin: 0 auto;
			h2{
				width: 15vw;
				margin: 0 auto;
				text-align: center;
				font-size: 3vw;
			}
			p{
				padding-top: 3vw;
				font-size: 1.3vw;
				font-weight: normal;
				letter-spacing: 0vw;
				line-height: 2.3vw;
				text-align: justify;
			}
			.swiperTop{
				// width: 100%;
				height: 24vw;
				margin-top: 4vw;
				overflow: hidden;
				.swiper-wrapper{
					.swiper-slide{
						display: inline-block;
						width: 54vw;
						height: 22vw;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.thumbsTop{
				width: 54vw;
				height: 11vw;
				margin: -1vw auto;
				overflow: hidden;
				.swiper-wrapper{
					.swiper-slide{
						width: 16vw;
						height: 11vw;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
							transition: all .5s;
							&:hover{
								cursor: pointer;
								transform: scale(1.5);
							}
						}
						
					}
					
				}
			}
		}
		.design{
			width: 54vw;
			margin: 0 auto;
			padding-top: 5vw;
			position: relative;
			h2{
				font-size: 3vw;
			}
			p{
				padding-top: 3vw;
				font-size: 1.3vw;
				font-weight: normal;
				letter-spacing: 0vw;
				line-height: 2.3vw;
				text-align: justify;
				padding-bottom: 4vw;
			}
			.swiperBottom{
				width: 34vw;
				height: 34vw;
				overflow: hidden;
				.swiper-wrapper{
					.swiper-slide{
						width: 34vw;
						height: 34vw;
						overflow: hidden;
						img{
							width: 100%;
							height: 100%;
						}
					}
				}
			}
			.thumbsBottom{
				position: absolute;
				width: 16vw;
				height: 34vw;
				bottom:0vw;
				right: 0;
				overflow: hidden;
				.swiper-wrapper{
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.swiper-slide{
						width: 16vw;
						height: 10.8vw;
						// overflow: hidden;
						img{
							width: 16vw;
							height: 10.8vw;
							transition: all .5s;
							&:hover{
								cursor: pointer;
								transform: scale(0.9);
							}
						}
					}
				}				
			}
		}
		.brand{
			padding-top: 4vw;
			width: 54vw;
			margin: 0 auto;
			h2{
				font-size: 3vw;
				text-align: right;
			}
			p{
				font-size: 1.3vw;
				font-weight: normal;
				letter-spacing: 0vw;
				line-height: 2.3vw;
				text-align: justify;
				padding-top: 3vw;
				padding-bottom: 10vw;
			}
		}
		.pageBottom{
			a{
				display: block;
				width: 100%;
				height: 52vw;
				overflow: hidden;
				img{
					width: 100%;
				}
			}
		}
	}
}

@media screen and (max-width:812px) {
	.web{
		main{
			.about{
				p{
					line-height: 4vw;
					// font-size: 1.9vw;
					
				}
			}
			.design{
				p{
					line-height: 4vw;
					// font-size: 1.9vw;
					
				}
			}
			.brand{
				p{
					line-height: 4vw;
					
				}
			}
		}
	}
	
	
}